<template>
  <audio ref="audioRef" style="display: none">
    <source :src="url" type="audio/mpeg" />
  </audio>
  <div :class="btnsIcon ? 'audio_btn' : 'audio_right'">
    <img
      v-if="!audioIsPlay"
      @click="playAudio"
      class="audio_icon"
      src="@/assets/img/pause.png"
      alt="播放"
    />
    <img
      v-if="audioIsPlay"
      @click="playAudio"
      class="audio_icon"
      src="@/assets/img/play.png"
      alt="暂停"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  url: {
    type: String
  },
  isPauseTtsAudio: {
    type: Boolean,
    default: () => false
  },
  btnsIcon: {
    type: Boolean,
    default: () => false
  }
})
const audioIsPlay = ref(true) //音频是否在播放
const audioRef = ref(null)

// 刷新方法
const refreshAudioPlayer = () => {
  audioRef.value?.load()
}
watch(
  () => props.url,
  (val) => {
    if (val) {
      refreshAudioPlayer()
    }
  },
  { immediate: true, deep: true }
)

defineExpose({ refreshAudioPlayer })
// 播放暂停控制
const playAudio = () => {
  if (audioRef.value.paused) {
    audioRef.value.play()
  } else {
    audioRef.value.pause()
  }
  audioRef.value.onplay = () => {
    audioIsPlay.value = false
  }
  audioRef.value.onpause = () => {
    audioIsPlay.value = true
  }
  audioRef.value.onended = () => {
    audioIsPlay.value = true
  }
}
</script>

<style lang="scss" scoped>
.audio_none {
  display: none;
}
.audio_btn {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #0052cc;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  .slider_box {
    width: 160px;
    height: 4px;
    border-radius: 5px;
    background-color: #f1f1f1;
    flex: 1;
    margin: 0 8px 4px;
  }
  .audio_icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .audio_time {
    color: #f1f1f1;
    overflow: hidden;
    font-size: 12px;
    position: absolute;
    bottom: 3px;
    left: 80px;
    .audio_total {
      float: right;
    }
    .audio_current {
      float: left;
    }
  }
}
.audio_right {
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  background: #0052cc;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
  margin-right: 10px;
  .slider_box {
    width: 160px;
    height: 4px;
    border-radius: 5px;
    background-color: #f1f1f1;
    flex: 1;
    margin: 0 8px 4px;
  }
  .audio_icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .audio_time {
    color: #f1f1f1;
    overflow: hidden;
    font-size: 12px;
    position: absolute;
    bottom: 3px;
    left: 80px;
    .audio_total {
      float: right;
    }
    .audio_current {
      float: left;
    }
  }
}
.volume {
  position: relative;
  .volume_progress {
    width: 32px;
    height: 140px;
    position: absolute;
    top: -142px;
    right: -4px;
  }
  .volume_bar {
    background: #fff;
    border-radius: 4px;
  }
  .volume_icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.el-slider__button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider_box,
.volume_bar {
  .el-slider__button {
    width: 8px;
    height: 8px;
    border: none;
  }
  .el-slider__bar {
    background: #00db15;
  }
}
.slider_box {
  .el-slider__button-wrapper {
    width: 8px;
  }
}
.volume_bar {
  .el-slider__runway {
    margin: 0 14px !important;
  }
}
</style>
